<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <div>
        <input v-model="inputValue" type="text">
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
       <!-- <li v-for="(item,index) of list" :key="index">
            {{item}}
        </li>-->

        <todo-item
            v-for="(item,index) of list"
            :key="index"
            :content="item"
            :index="index"
            @delete="handleDelete"
        >

        </todo-item>
    </ul>
</div>
<script>

    Vue.component("todo-item",{
        props:['content','index'],
        template:'<li @click="handleClick">{{content}}{{index}}</li>',
        methods:{
            handleClick:function () {
                this.$emit('delete',this.index)

            }
        }
    })

   /* 局部组件
    var todoItem = {
        template:"<li>item</li>"
    }*/
    new Vue({

        el:"#root",
        /*注册组件*/
        /*components:{
            'todo-item':todoItem
        },*/
        data:{
            inputValue:"hello",
            list:[]
        },
        methods:{
            handleSubmit:function () {
                this.list.push(this.inputValue);
                this.inputValue='';
            },
            handleDelete:function (index) {
                this.list.splice(index,1);

            }
        }
    })
</script>
</body>
</html>